<template>
  <div class="check">
    <div class="form-item">
      <span>用户名</span>
      <input type="text" value="name" />
    </div>
    <div class="form-item">
      <span>密码</span>
      <input type="text" value="password" />
    </div>
    <div class="form-item">
      <button @click="submit">submit!</button> 
    </div> 
    <div id="container"></div>
    <as></as>
  </div>
</template>

<script>
import as from './b.vue';
export default {
  components: {
    as
  },
  data() {
    return {
      name: '',
      password: '',
      datas: {
        nodes: [
        {
        id: '0',
        label: 'node-0',
        x: 100,
        y: 100,
        description: 'This is node-0.',
        subdescription: 'This is subdescription of node-0.',
      },
      {
        id: '1',
        label: 'node-1',
        x: 250,
        y: 100,
        description: 'This is node-1.',
        subdescription: 'This is subdescription of node-1.',
      },
      {
        id: '2',
        label: 'node-2',
        x: 150,
        y: 310,
        description: 'This is node-2.',
        subdescription: 'This is subdescription of node-2.',
      },
        ],
        edges: [
    {
      id: 'e0',
      source: '0',
      target: '1',
      description: 'This is edge from node 0 to node 1.',
    },
    {
      id: 'e1',
      source: '0',
      target: '2',
      description: 'This is edge from node 0 to node 2.',
    },
    {
      id: 'e2',
      source: '0',
      target: '3',
      description: 'This is edge from node 0 to node 3.',
    },
  ],

      }
    }
  },
  mounted() {
  },  
  methods: {
    submit() {
      
    },
  },
};
</script>

<style scoped>
.check {
}
.form-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.form-item span {
  width: 60px;
}
</style>